// 编辑画布
.epic-edit-canvas {
  flex: 1;
  background-image: linear-gradient(#f8f8f8 14px, transparent 0),
    linear-gradient(90deg, transparent 14px, #373739 0);
  background-size: 15px 15px;
  overflow: hidden;

  // &.moveing {
  //   width: 100%;
  //   height: 6px;
  //   border-radius: 6px;
  //   overflow: hidden;
  //   &::after {
  //     content: "";
  //     position: absolute;
  //     top: 0;
  //     left: 0;
  //     width: 100%;
  //     height: 100%;
  //     background-color: red;
  //   }
  // }

  .epic-edit-range {
    background-color: white;
    overflow-y: auto;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
      rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    cursor: pointer;

    .draggable-range {
      min-height: 60px;
      height: 100%;
      border: 1px @border-color dashed;
      width: 100%;
    }

    .slot-draggable-range {
      min-height: 20px;
      min-width: 20px;
    }

    > div > .draggable-range {
      border: transparent;

      // 屏蔽antd element-plus label点击事件
      .ant-form-item-label > label,
      .el-form-item > .el-form-item__label {
        pointer-events: none;
      }
    }

    .root-node > .form-main > form > .draggable-range {
      border: transparent;
    }
  }

  .hover-widget {
    border: 1px @primary-color dashed;
    box-sizing: border-box;
  }

  .checked-widget {
    border: 1px @primary-color dashed;
    background: @primary-hover-bg-color;

    &::before {
      content: "";
      height: 5px;
      background: @primary-color;
      position: absolute;
      left: 0;
      width: 100%;
    }

    &.top,
    &.center {
      &::before {
        top: -5px;
      }
    }

    &.bottom {
      &::before {
        bottom: -5px;
      }
    }

    // &::before {
    //   width: 100%;
    // }

    .action-box {
      position: absolute;
      z-index: 999;
      height: 30px;
      background: @primary-color;
      border-radius: 4px 4px 0px 0px;
      color: white;
      display: flex;
      padding: 0 4px;

      .action-item {
        height: 30px;
        line-height: 25px;
        padding: 0 4px;
        cursor: pointer;
      }
    }

    .form-main {
      padding: 6px;
      border: 1px solid #f0f0f0;
    }
  }

  // 隐藏设计区域滚动条
  .epic-edit-screen-container {
    &::-webkit-scrollbar {
      // display: none;
      width: 6px;
      height: 6px;
    }
  }

  .edit-toolbar {
    height: 40px;
    background: #ffffff;
    box-sizing: border-box;
    border-bottom: 1px solid #eaeaea;

    .action-item.disabled {
      color: #aaa;
      cursor: no-drop;
    }

    .device-item.checked {
      color: @primary-color;
    }
  }

  .widget-box {
    cursor: move;
  }
}
